@charset "UTF-8";


* {
    margin: 0;
    padding: 0;
}

/*第一屏幕*/
.first {
    background-color: #0da5d6;
    padding-top: 70px;
}

.first>div {
    /*display: flex;*/
    /*justify-content: center;*/
    /*flex-wrap:wrap;*/
}


.first .logo {
    background:url("../images/logo.png");
    width: 251px;
    height: 186px;
    margin: 0 auto;
}

.first .text {
    text-align: center;
    margin:70px 10px;
}

.first .text img {
    margin: 0 30px;
    opacity:0;
}

.first .info {
    background:url("../images/info_1.png");
    width: 772px;
    height: 49px;
    margin:60px auto;
}


/*第二屏幕*/
.second {
    background-color: #2AB561;
    overflow: hidden;
}

.second>div {
    display:flex;
    justify-content:center;
    align-items: center;
}


.second .shield {
    width: 428px;
    height: 498px;
    margin: 0 50px;

}

.second .shield img{
    float: left;
}

.second .info {
    background: url("../images/info_2.png");
    width: 635px;
    height: 309px;
}

.second img:nth-child(1){
    transform:translate(400px,450px) rotate(60deg);
}

.second img:nth-child(2){
    transform:translate(300px,200px) rotate(40deg);
}

.second img:nth-child(3){
    transform:translate(200px,-150px) rotate(70deg);
}

.second img:nth-child(4){
    transform:translate(700px,250px) rotate(80deg);
}

.second img:nth-child(5){
    transform:translate(500px,-50px) rotate(20deg);
}

.second img:nth-child(6){
    transform:translate(-120px,300px) rotate(90deg);
}

.second img:nth-child(7){
    transform:translate(-200px,200px) rotate(40deg);
}

.second img:nth-child(8){
    transform:translate(400px,50px) rotate(20deg);
}

.second img:nth-child(9){
    transform:translate(-20px,-20px) rotate(30deg);
}


/*第三屏幕*/
.third {
    background-color: #DE8910;
    position: relative;
    overflow: hidden;
}

.third>div {
    display: flex;
    justify-content:center;
    align-items:center;
}

.third .info {
    background:url("../images/info_3.png");
    width: 631px;
    height: 278px;
    margin-left: -40px;
    margin-right: 60px;
}

.third .circle {
    background: url("../images/circle.png");
    width: 453px;
    height: 449px;
}

.third .rocket {
    background: url("../images/rocket.png");
    width: 203px;
    height: 204px;
    position:absolute;
    left: 100px;
    bottom: -210px;
}

/*第四屏幕*/
.fourth {
    background-color: #16BA9D;
}

.fourth>div {
    display:flex;
    justify-content:center;
    align-items:center;
}

.fourth .search {
    margin-left: 5px;
    margin-right: 60px;
    margin-top: 110px;
    position: relative;
}

.fourth .toolbar {
    background: url("../images/search.png");
    width: 529px;
    height: 66px;
    transform:translate(-650px,0);
}

.fourth .key {
    background: url("../images/key.png");
    /*width: 99px;*/
    width: 0px;
    height: 22px;
    position: absolute;
    left: 26px;
    top:24px;
}

.fourth .wrap {
    overflow:hidden;
    margin-top: -13px;
}

.fourth .result {
    background: url("../images/result.png");
    width: 529px;
    height: 372px;
    transform:translate(0,-380px);
}

.fourth .info {
    background: url("../images/info_4.png");
    width: 612px;
    height: 299px;
}

/*第五屏幕*/
.fifth {
    background-color: #0DA5D6;
    overflow: hidden;
}

.fifth>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fifth .info {
    background: url("../images/info_5.png");
    width: 1077px;
    height: 134px;
}

.fifth .browser {
    flex: 1;
    width: 1004px;
    margin-top: 20px;
    position: relative;
    background-color: rgba(255,255,255,0);

}

.fifth .line {
    background-color: #fff;
    opacity: 0.6;
}

.fifth .toolbarline {
    /*width: 914px;*/
    width: 0px;
    height: 25px;
    border: 0px solid #fff;
    position: absolute;
    left: 76px;
    top: 31px;
    opacity: 0.6;
}

.fifth .bg {
    background: url("../images/toolbar.png");
    width: 1004px;
    height: 79px;
    opacity: 0;
}

.fifth .topline {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(1400px,0);
}

.fifth .rightline {
    width: 1px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(0,1400px);
}

.fifth .bottomline {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform:translate(-1400px,0);
}

.fifth .leftline {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform:translate(0,-1400px);
}

.fifth .extra {
    background: url("../images/extra.png");
    /*width: 394px;*/
    width: 0;
    height: 29px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.fifth .extra-line {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 32px;
    transform:translate(-1400px,0);
}
/*第一屏幕动画*/
.first.current .text img{
    margin: 0 5px;
    opacity:1;
    transition:all 1s linear;
}

/*第二屏幕动画*/
.second.current img{
    transform:translate(0,0) rotate(0deg);
    transition:all 1s linear;
}

/*第三屏幕动画*/
.third.current .rocket {
    transform:translate(800px,-450px);
    transition: all 1s linear;
}

/*第四屏幕动画*/
.fourth.current .toolbar {
    transform:translate(0,0);
    transition: all 1s linear;
}

.fourth.current .key {
    width: 99px;
    transition: all 2s steps(5) 1s;
}

.fourth.current .result {
    transform:translate(0,0);
    transition: all 1s linear 3s;
}

/*第五屏幕动画*/
.fifth.current .browser {
    background-color: rgba(255,255,255,0.1);
    transition: all 1s linear 1.5s;
}

.fifth.current .line {
    transform: translate(0,0);
    transition: all 1.5s linear;
}

.fifth.current .toolbarline{
    width: 914px;
    border: 1px solid #fff;
    transition: all  1s linear 1s
}

.fifth.current .bg {
    opacity: 1;
    transition: all 1.5s linear 1s;
}

.fifth.current .extra {
    width: 394px;
    transition: all 1.5s linear 1s;
}